<template>
	<view class="container">
		<map id="map" style="width: 100vw;height: 100vh;" longitude="116.397128" latitude="39.916527" scale="14"
			@markertap="onMarkerTap" @callouttap="onCalloutTap" :circles="circles" show-location>
			<cover-view slot="callout">
				<template v-for="(item,index) in  markers">
					<cover-view :class="Number(num) % 2==0?'callout':'callouts'" :marker-id="item.id">
						<cover-image class="icon" src="@/static/logo.png"></cover-image>
						<cover-view class="test">
							<text>这里是标题</text>
						</cover-view>
					</cover-view>
				</template>
			</cover-view>
		</map>
	</view>
</template>

<script>
	const testMarkers = [{
		id: 1,
		latitude: 39.916527,
		longitude: 116.397128,
		zIndex: '1',
		iconPath: '/static/16.jpg',
		width: 40,
		height: 40,
		customCallout: {
			anchorY: 0,
			anchorX: 0,
			display: 'ALWAYS'
		},
		circles: [{ //在地图上显示圆
			latitude: 39.916527,
			longitude: 116.397128,
			fillColor: "#e6060a6A", //填充颜色
			color: "#e6060a6A", //描边的颜色
			radius: 5000, //半径
			strokeWidth: 2 //描边的宽度
		}]
	}];
	export default {
		data() {
			return {
				markers: testMarkers,
				num: 0,
				calloutShow: false,
				circles: [{ //在地图上显示圆
					latitude: 39.916527,
					longitude: 116.397128,
					fillColor: "#e6060a6A", //填充颜色
					color: "#e6060a6A", //描边的颜色
					radius: 500, //半径
					strokeWidth: 2 //描边的宽度
				}]
			};
		},
		methods: {
			onMarkerTap(e) {
				this.calloutShow = true;
			},
			onCalloutTap(e) {
				console.log('Callout 被点击', e);
			}
		}
	};
</script>

<style>
	.callout-content {
		width: 150px;
		background-color: #fff;
		border-radius: 10px;
		padding: 5px;
		text-align: center;
	}
</style>